<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet"  th:href="@{/css/bootstrap.css}" />
    <link th:href="@{/css/semantic.min.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap-paginator.js}"></script>
    <!--    <script th:src="@{/js/jquery-3.1.1.min.js}"></script>-->
    <script th:src="@{/js/semantic.min.js}">
    </script>
</head>
<body>
<!--菜单-->
<ul class="layui-nav layui-bg-blue" lay-filter="">
    <li class="layui-nav-item "><a href="/" style="font-size: 20px">首页</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;" style="font-size: 20px">习题库</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd>
                <a th:href="@{/item/chapter/overview}">分章节练习</a>
            </dd>
            <dd>
                <a th:href="@{/item/overview}">分题型练习</a>
            </dd>
        </dl>
    </li>
    <li class="layui-nav-item layui-this">
        <a href="javascript:;" style="font-size: 20px">课程分类</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd>
                <a th:href="@{'/course/type_show/'+${coursetype.getId()}}" th:each="coursetype:${coursetypes}" th:text="${coursetype.getCourse_name()}"></a>
            </dd>
            <dd>
                <a th:href="@{/course/type_show/0}" >全部课程</a>
            </dd>
        </dl>
    </li>
    <li class="layui-nav-item" th:if="${session.loginuser} == null"><a th:href="@{/community/index}" style="font-size: 20px">社区</a></li>
    <li class="layui-nav-item " th:if="${session.loginuser} != null">
        <a href="javascript:;" style="font-size: 20px">社区</a>
        <dl class="layui-nav-child">
            <dd><a th:href="@{/community/index}">社区首页</a></dd>
            <dd><a th:href="@{/stu/community/commenting}">发布话题</a></dd>
            <dd><a th:href="@{/stu/community/management}">我的话题</a></dd>
            <dd><a th:href="@{/stu/chat_all}" target="_blank">头脑风暴</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a th:href="@{/file/list}" style="font-size: 20px">资料干货</a></li>

    <!--如果没有登录-->
    <li class="layui-nav-item" th:if="${session.loginuser} == null">
        <a th:href="@{/login}" style="font-size: 20px">登录</a>
    </li>
    <li class="layui-nav-item" th:if="${session.loginuser} == null">
        <a th:href="@{/register}" style="font-size: 20px">注册</a>
    </li>
    <!--如果没有登录-->

    <!--如果登录-->
    <li class="layui-nav-item" th:if="${session.loginuser} != null">
        <a href="javascript:;" style="font-size: 20px">我的班级</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd>
                <a th:href="@{/stu/map/show}">班级签到</a>
            </dd>
            <dd>
                <a th:href="@{/stu/exam/overview}">班级考试</a>
            </dd>
            <dd>
                <a th:href="@{/stu/exam/mydegree/list}">我的考试成绩</a>
            </dd>
        </dl>
    </li>
    <li class="layui-nav-item" th:if="${session.loginuser} != null">
        <a href="javascript:;" style="font-size: 20px">好友管理</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd>
                <a th:href="@{/stu/friends/list}">好友列表</a>
            </dd>
            <dd>
                <a th:href="@{/stu/friends/search}">搜索好友</a>
            </dd>
        </dl>
    </li>
    <li class="layui-nav-item" th:if="${session.loginuser} != null">
        <img th:src="@{'/show/'+${session.loginuser.getId()}}" class="layui-nav-img">[[${session.loginuser.username}]]
        <dl class="layui-nav-child">
            <dd><a th:href="@{/stu/center}">个人中心</a></dd>
            <dd><a th:href="@{/stu/logout}">退出</a></dd>
        </dl>
    </li>

    <!--如果登录-->
</ul>
<!--菜单-->

<!--分割线-->
<!--<h2 class="ui center aligned blue icon header">-->
<!--    <i class="circular student  icon"></i>-->
<!--    [[${typename}]]-->
<!--</h2>-->
<!--分割线-->

<div class="ui pointing menu">
    <a class="active item">
        <i class="home icon"></i> [[${typename}]]
    </a>
    <div class="ui dropdown item">
        排序
        <i class="dropdown icon"></i>
        <div class="menu">
            <a class="item" th:href="@{'/course/type_show/'+${type_id}}">按点赞排序</a>
            <a class="item" th:href="@{'/course/type_show/datetime/'+${type_id}}">按时间排序</a>
        </div>
    </div>
    <!--    <a class="item">-->
    <!--        <i class="mail icon"></i> Messages-->
    <!--    </a>-->
    <!--    <a class="item">-->
    <!--        <i class="user icon"></i> Friends-->
    <!--    </a>-->
    <div class="right menu">
        <div class="item">
            <form method="post" id="myform" th:action="@{'/course/type_show/datetime/'+${type_id}}">
            <div class="ui icon input">
                <!--                            保存当前有多少页-->
                <input type="hidden" th:value="${pageinfo.pageNum}" id="page" name="page">
                <input type="text" placeholder="搜索课程" name="course_name" th:value="${course_name}">
            </div>
                <button class="ui button " type="submit">搜索</button>
            </form>
        </div>

    </div>
</div>

<!--            <dd><a th:href="@{'/stu/course/type_show/datetime/'+${type_id}}">按时间先后</a></dd>-->
<!--            <dd><a th:href="@{'/stu/course/type_show/'+${type_id}}">按点赞数量</a></dd>-->

<!--课程显示-->
<div class="ui centered fluid cards" >
<!--    <input type="hidden" th:value="${type_id}" id="mytype">-->
    <div class="card" th:each="course:${pageinfo.list}">
        <div class="ui middle image">
            <a th:href="@{'/course/show/'+${course.getId()}}">
                <img  th:src="@{'https://wk2020.oss-cn-shenzhen.aliyuncs.com/'+${course.getCourse_image()}}"
                      data-title="开始答题"
                      data-content="可以保存"   >
            </a>
        </div>
        <div class="content">
            <div class="header" th:text="${course.getCourse_name()}"></div>
            <!--            <div class="meta">-->
            <!--                <a>Friends</a>-->
            <!--            </div>-->
            <div class="description" >
                <i class="layui-icon layui-icon-praise"><em th:text="${course.getPraise()}"></em></i><br>
                <i class="layui-icon layui-icon-time"><em th:text="${#dates.format(course.getCreatetime(),'yyyy年MM月dd日')}"></em></i>
            </div>
        </div>
        <div class="extra content">

            <a th:href="@{'/course/show/'+${course.getId()}}">
      <span class="right floated">
        观看课程
      </span>
            </a>
            <span>
              <a th:href="@{'/course/comment/'+${course.getId()}}">
                评论
            </a>
      </span>
        </div>
    </div>

</div>
<!--课程显示-->
<!--使用bootstrop-paginot实现分页-->
<div class="text-center">
    <ul id="pagination"></ul>
</div>
<div class="ui blue divider"></div>
<!--内容丰富-->
<div class="service-content" th:if="${type_id.equals('1')}">
    <div class="content-introduction">
        <div class="layui-fluid">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                    <div class="text">
                        <h2>计算机网络体系结构</h2>
                        <div class="line"></div>
                        <p>21 世纪的一些重要特征是数字化、网络化和信息化，它是一个以网络为核心的信息时代。
                            网络现在已经成为信息社会的命脉和发展知识经济的重要基础。
                        </p>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md3">
                    <img th:src="@{/images/network_1.jpg}" style="width: 500px">
                </div>
            </div>
        </div>
    </div>

    <div class="service-process-box">
        <div class="service-process">
            <div class="layui-fluid">
                <h3 class="title">课程要求</h3>
                <div class="process-centent">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>01</h4>
                                <h5>掌握</h5>
                                <p>1. 互联网的概述、组成
                                <p>   2. 计算机网络的类别、性能
                                <p>   3.计算机网络体系结构
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>02</h4>
                                <h5>熟悉</h5>
                                <p>计算机网络在信息时代中的作用</p>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>03</h4>
                                <h5>了解</h5>
                                <p>计算机网络在我国的发展</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="service-content" th:if="${type_id.equals('2')}">
    <div class="content-introduction">
        <div class="layui-fluid">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                    <div class="text">
                        <h2>物理层</h2>
                        <div class="line"></div>
                        <p>物理层考虑的是怎样才能在连接各种计算机的传输媒体上传输数据比特流，而不是指具体的传输媒体。
                            物理层的作用是要尽可能地屏蔽掉不同传输媒体和通信手段的差异。
                            用于物理层的协议也常称为物理层规程 (procedure)。
                        </p>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md3">
                    <img th:src="@{/images/network_2.jpg}" style="width: 500px">
                </div>
            </div>
        </div>
    </div>
    <div class="service-process-box">
        <div class="service-process">
            <div class="layui-fluid">
                <h3 class="title">课程要求</h3>
                <div class="process-centent">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>01</h4>
                                <h5>掌握</h5>
                                <p>1.数据通信的基础知识
                                <p> 2. 物理层传输媒体
                                <p>3.信道复用技术
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>02</h4>
                                <h5>熟悉</h5>
                                <p>宽带接入技术</p>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>03</h4>
                                <h5>了解</h5>
                                <p>数字传输系统</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="service-content" th:if="${type_id.equals('3')}">
    <div class="content-introduction">
        <div class="layui-fluid">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                    <div class="text">
                        <h2>数据链路层</h2>
                        <div class="line"></div>
                        <p>数据链路层使用的信道主要有以下两种类型：
                            点对点信道。这种信道使用一对一的点对点通信方式。
                            广播信道。这种信道使用一对多的广播通信方式，因此过程比较复杂。广播信道上连接的主机很多，因此必须使用专用的共享信道协议来协调这些主机的数据发送。
                        </p>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md3">
                    <img th:src="@{/images/network_3.jpg}" style="width: 500px">
                </div>
            </div>
        </div>
    </div>

    <div class="service-process-box">
        <div class="service-process">
            <div class="layui-fluid">
                <h3 class="title">课程要求</h3>
                <div class="process-centent">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>01</h4>
                                <h5>掌握</h5>
                                <p>1. 使用广播信道的数据链路层
                                <p> 2. 扩展的以太网
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>02</h4>
                                <h5>熟悉</h5>
                                <p>数据链路层的三个基本问题</p>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>03</h4>
                                <h5>了解</h5>
                                <p>1.点对点协议PPP
                                <p>2.高速以太网
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="service-content" th:if="${type_id.equals('4')}">
    <div class="content-introduction">
        <div class="layui-fluid">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                    <div class="text">
                        <h2>网络层</h2>
                        <div class="line"></div>
                        <p>在计算机网络领域，网络层应该向运输层提供怎样的服务（“面向连接”还是“无连接”）曾引起了长期的争论。
                            争论焦点的实质就是：在计算机通信中，可靠交付应当由谁来负责？是网络还是端系统？
                        </p>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md3">
                    <img th:src="@{/images/network_4.jpg}" style="width: 500px">
                </div>
            </div>
        </div>
    </div>

    <div class="service-process-box">
        <div class="service-process">
            <div class="layui-fluid">
                <h3 class="title">课程要求</h3>
                <div class="process-centent">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>01</h4>
                                <h5>掌握</h5>
                                <p>1. 网际协议IP
                                <p>  2. 划分子网和构造超网
                                <p> 3.互联网的路由选择协议
                                <p> 4.虚拟专用网VPN和网络地址转换NAT
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>02</h4>
                                <h5>熟悉</h5>
                                <p>1.网际控制报文协议ICMP
                                <p> 2.IPV6
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>03</h4>
                                <h5>了解</h5>
                                <p>IP多播</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="service-content" th:if="${type_id.equals('5')}">
    <div class="content-introduction">
        <div class="layui-fluid">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                    <div class="text">
                        <h2>传输层</h2>
                        <div class="line"></div>
                        <p>从通信和信息处理的角度看，运输层向它上面的应用层提供通信服务，它属于面向通信部分的最高层，同时也是用户功能中的最低层。
                            当网络的边缘部分中的两个主机使用网络的核心部分的功能进行端到端的通信时，只有位于网络边缘部分的主机的协议栈才有运输层，而网络核心部分中的路由器在转发分组时都只用到下三层的功能。
                        </p>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md3">
                    <img th:src="@{/images/network_5.jpg}" style="width: 500px">
                </div>
            </div>
        </div>
    </div>

    <div class="service-process-box">
        <div class="service-process">
            <div class="layui-fluid">
                <h3 class="title">课程要求</h3>
                <div class="process-centent">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>01</h4>
                                <h5>掌握</h5>
                                <p>1.运输层的端口
                                <p> 2.传输控制协议TCP
                                <p> 3.TCP的流量控制及拥塞控制
                                <p> 4.TCP的运输连接管理（三次握手及其他）
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>02</h4>
                                <h5>熟悉</h5>
                                <p>用户数据报协议UDP</p>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>03</h4>
                                <h5>了解</h5>
                                <p>可靠传输的工作原理</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="service-content" th:if="${type_id.equals('6')}">
    <div class="content-introduction">
        <div class="layui-fluid">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                    <div class="text">
                        <h2>应用层</h2>
                        <div class="line"></div>
                        <p>每个应用层协议都是为了解决某一类应用问题，而问题的解决又往往是通过位于不同主机中的多个应用进程之间的通信和协同工作来完成的。应用层的具体内容就是规定应用进程在通信时所遵循的协议。
                            应用层的许多协议都是基于客户服务器方式。客户(client)和服务器(server)都是指通信中所涉及的两个应用进程。客户服务器方式所描述的是进程之间服务和被服务的关系。客户是服务请求方，服务器是服务提供方
                        </p>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md3">
                    <img th:src="@{/images/network_6.jpg}" style="width: 500px">
                </div>
            </div>
        </div>
    </div>

    <div class="service-process-box">
        <div class="service-process">
            <div class="layui-fluid">
                <h3 class="title">课程要求</h3>
                <div class="process-centent">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>01</h4>
                                <h5>掌握</h5>
                                <p>1. 域名系统DNS
                                <p> 2. 万维网WWW
                                <p> 3.电子邮件
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>02</h4>
                                <h5>熟悉</h5>
                                <p>1. 文件传送协议FTP
                                <p> 2. P2P应用
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
                            <div class="item">
                                <h4>03</h4>
                                <h5>了解</h5>
                                <p>远程终端协议TELNET </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<!--内容丰富-->
</body>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });

    $(document).ready(function () {
        $('.ui.dropdown.item').dropdown();
        // var mytype=$('#mytype').val();
        // console.log(mytype);

        $('#pagination').bootstrapPaginator({
            bootstrapMajorVersion: 3,
            currentPage:[[${pageinfo.PageNum}]],
            totalPages:[[${pageinfo.Pages}]],
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },
            //重新提交，不会因为点击而忽略了查找值
            onPageClicked:function (event,originalEvent,type,page) {
                $('#page').val(page);
                $('#myform').submit();
            }
            // pageUrl: function (type, page, current) {
            //     return '/stu/course/type_show/datetime/' + mytype +'/'  +page ;
            // }
        })
    })

</script>
</html>